<template>
  <div id="home" class="content-section">
    <div class="stats">
      <div class="stat-item blue">
        <span id="totalExaminees">0</span>
        <p>考试总人数</p>
      </div>
      <div class="stat-item green">
        <span id="attendedExaminees">0</span>
        <p>已参加人数</p>
      </div>
      <div class="stat-item red">
        <span id="unattendedExaminees">0</span>
        <p>未参加人数</p>
      </div>
    </div>
    <div class="chart-section">
      <canvas id="timesheetChart"></canvas>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  // 初始化图表
  const ctx = document.getElementById('timesheetChart').getContext('2d');
  const timesheetChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      datasets: [
        {
          label: '参考统计',
          data: [8, 6, 7, 5, 8, 4, 3],
          borderColor: '#1ab394',
          backgroundColor: 'rgba(26, 179, 148, 0.2)',
          borderWidth: 1
        }
      ]
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

  // 模拟从 Java 接口获取数据
  const fetchExamData = () => {
    const apiUrl = '/api/tongji';
    fetch(apiUrl, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    })
      .then((response) => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error('网络请求失败');
        }
      })
      .then((data) => {
        console.log('获取到的考试数据:', data);
        updateStats(data);
        updateChart(data);
      })
      .catch((error) => {
        console.error('获取考试数据出错:', error);
      });
  };

  // 更新数据统计区域
  const updateStats = (data) => {
    const totalExaminees = document.getElementById('totalExaminees');
    const attendedExaminees = document.getElementById('attendedExaminees');
    const unattendedExaminees = document.getElementById('unattendedExaminees');

    totalExaminees.textContent = data.total;
    attendedExaminees.textContent = data.attended;
    unattendedExaminees.textContent = data.unattended;
  };

  // 更新图表
  const updateChart = (data) => {
    const ctx = document.getElementById('timesheetChart').getContext('2d');
    const timesheetChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        datasets: [
          {
            label: '参考统计',
            data: data.chartData,
            borderColor: '#1ab394',
            backgroundColor: 'rgba(26, 179, 148, 0.2)',
            borderWidth: 1
          }
        ]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  };

  fetchExamData();
});
</script>

<style scoped>
/* 数据统计区域样式 */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-item {
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
}

.blue {
  background-color: #1ab394;
}

.green {
  background-color: #28a745;
}

.red {
  background-color: #dc3545;
}

/* 图表区域样式 */
.chart-section {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>